<template>
	<div class="my-container">
		<van-cell-group class="my-infos" v-if=" Object.keys(user).length > 0 ">
			<van-cell center :border="false" class="base-infos">
				<div slot="icon">
					<van-image class="avatar" :src="userInfos.photo" round fit="cover" />
				</div>
				<div slot="title" class="username">{{ userInfos.name }}</div>
				<div slot="default">
					<van-button type="default" size="small" round class="editBtn" to="/user/profile">编辑资料</van-button>
				</div>
			</van-cell>
			<van-grid :border="false" class="data-infos">
				<van-grid-item class="data-info-item">
					<div class="info-wrap" slot="text">
						<div class="nums">0</div>
						<div class="title">头条</div>
					</div>
				</van-grid-item>
				<van-grid-item class="data-info-item">
					<div class="info-wrap" slot="text">
						<div class="nums">0</div>
						<div class="title">关注</div>
					</div>
				</van-grid-item>
				<van-grid-item class="data-info-item">
					<div class="info-wrap" slot="text">
						<div class="nums">0</div>
						<div class="title">粉丝</div>
					</div>
				</van-grid-item>
				<van-grid-item class="data-info-item">
					<div class="info-wrap" slot="text">
						<div class="nums">0</div>
						<div class="title">获赞</div>
					</div>
				</van-grid-item>
			</van-grid>
		</van-cell-group>
		<div class="not-login" v-else @click="gotoLogin">
			<div class="avatar-img">
				<img src="./mobile.png" alt />
			</div>
			<div class="show-text">登录&nbsp;/&nbsp;注册</div>
		</div>
		<van-grid :column-num="2" class="nav-grid mb-4">
			<van-grid-item class="nav-grid-item" icon-prefix="iconfont" icon="lishi" text="历史记录" />
			<van-grid-item class="nav-grid-item" icon-prefix="iconfont" icon="shoucang" text="收藏" />
		</van-grid>
		<van-cell v-if="user" title="消息通知" is-link to="/user/chat" />
		<van-cell class="mb-4" title="小爱同学" is-link to="/" />
		<van-cell v-if="user" class="loginout-cell" title="退出" @click="loginoutBtn" />
	</div>
</template>

<script>
	import { mapState } from "vuex";
	import { getCurrentUser } from "@/api/";
	import storage from "@/utils/storage";
	export default {
		name: "my",
		data() {
			return {
				userInfos: {}
			};
		},
		methods: {
			// 点击退出按钮
			loginoutBtn() {
				// 点击退出登录按钮-> 显示一个弹框-> 点击确定退出（清除本地数据和vuex中的user数据）点击取消什么事情都不做
				this.$dialog
					.confirm({
						title: "退出登录提示信息",
						message: "您确定退出登陆吗？"
					})
					.then(() => {
						// on confirm确定
						// 把vuex中的state中的user数据清空
						this.$store.commit("setUser", null);
					})
					.catch(() => {
						// on cancel 取消
					});
			},
			//获取当前用户的信息
			async getCurrentUserInfos() {
				const { data } = await getCurrentUser();
				console.log(data);
				this.userInfos = data.data;
			},
			//去登陆
			gotoLogin() {
				this.$router.push("login");
			}
		},
		computed: {
			...mapState(["user", "flag"])
		},
		created() {
			this.getCurrentUserInfos();
		}
	};
</script>

<style lang="less" scoped>
	.my-container {
		.my-infos {
			background: url(./R-C.jpg) no-repeat;
			.base-infos {
				box-sizing: border-box;
				height: 115px;
				padding-top: 38px;
				padding-bottom: 11px;
				background-color: unset;
				.avatar {
					box-sizing: border-box;
					width: 66px;
					height: 66px;
					border: 1px solid #fff;
					margin-right: 11px;
				}
				.username {
					color: #fff;
					font-size: 15px;
				}
				.editBtn {
					height: 16px;
					font-size: 10px;
					color: #666;
				}
			}
			.data-infos {
				.data-info-item {
					height: 65px;
					color: #fff;
					.info-wrap {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.nums {
							font-size: 18px;
							padding-bottom: 3px;
						}
						.title {
							font-size: 11px;
						}
					}
				}
			}
			/deep/ .van-grid-item__content {
				background-color: unset;
			}
		}
		.not-login {
			height: 180px;
			background: url(./R-C.jpg) no-repeat;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.avatar-img {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				border-radius: 50%;
				width: 66px;
				height: 66px;
				img {
					width: 45px;
					height: 45px;
					border-radius: 50%;
				}
			}
			.show-text {
				color: #fff;
				font-size: 14px;
				margin-top: 8px;
			}
		}
		/deep/.nav-grid {
			.nav-grid-item {
				height: 70px;
				.iconfont {
					font-size: 22px;
				}
				.iconfont-shoucang {
					color: #eb5235;
				}
				.iconfont-lishi {
					color: #ff9d1d;
				}
				.van-grid-item__text {
					color: #333;
					font-size: 13px;
				}
			}
		}
		.loginout-cell {
			text-align: center;
			color: #d86262;
		}
		.mb-4 {
			margin-bottom: 4px;
		}
	}
</style>